<template>
    <el-form style="padding: 10px" label-position="left" size="small" label-width="0">
        <div class="item" style="margin-bottom: 12px;" v-for="(item, index) in externals" :key="index">
            <!-- <el-select v-model="item.name" @change="externalChange($event, index)">
                <el-option v-for="item in externalsOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select> -->
            <div>
                {{ item.label }}.{{ item.classify }}
            </div>
            <Icon class="minus" style="cursor: pointer;" @click="removeExternal(index)" name="el-icon-Minus" size="18"
                color="#e4353c" />
        </div>
        <el-popover placement="bottom" :width="200" trigger="click">
            <template #reference>
                <div class="add" style="cursor: pointer;">
                    <Icon name="el-icon-Plus" size="18" />
                </div>
            </template>
            <div @click="externalChange(item)" class="select_item" style="cursor: pointer; margin-top: 10px"
                v-for="item in externalsOptions" :key="item.value" :label="item.label">
                {{ item.label }}
            </div>
        </el-popover>

    </el-form>
</template>

<script setup>
import { ref } from 'vue'
import { queryExternal } from '/@/api/external'
import { addExternalEle } from '/@/utils/common'
const externalsOptions = ref([])

queryExternal().then(res => {
    externalsOptions.value = res.map(item => {
        return {
            value: item.name,
            label: item.name,
            url: item.url,
            classify: item.classify
        }
    })
})
const props = defineProps({
    externals: {
        type: Array
    }
})

const addExternal = () => {
    props.externals.push({
        name: ''
    })
}

const removeExternal = (index) => {
    props.externals.splice(index, 1)
}

const externalChange = (item) => {
    props.externals.push(item)
    if (!item.isAdd) {
        addExternalEle([item])
        item.isAdd = true
    }
}
</script>
<style lang="less" scoped>
.item {
    display: flex;
    align-items: center;

    .minus {
        margin-left: 12px;
        color: #e4353c;
    }
}

.add {
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
}

.select_item {
    opacity: .7;

    &:hover {
        opacity: 1;
    }
}
</style>